import * as React from 'react';
import { Input, Icon, Select, DatePicker, Row, Col, Form } from 'antd';
import classnames from 'classnames'
import * as Lodash from 'lodash';
import locale from 'antd/lib/date-picker/locale/zh_CN';

const Option = Select.Option;
const FormItem = Form.Item;

interface IProps {
  form: any,
  searchConfig: Array<object>,
}

interface IState {
  [propName: string]: any; 
}

class HeaderSearch extends React.Component<IProps, IState> {

  render() {
    const { searchConfig, } = this.props;
    const { getFieldDecorator } = this.props.form

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };
    
    return (
      <Form className="searchForm">
        <Row>
          {
            Lodash.map(searchConfig, (item: any, index: number) => {
              if (item.type === 'input') {
                return <Col span={8} key={index} >
                  <FormItem label={item.name} {...formItemLayout}>
                    {getFieldDecorator(item.key, {
                    })(
                      <Input
                        className={classnames('search-input')}
                        placeholder={`请输入${item.name}`}
                        name={item.key}
                      />
                    )}
                  </FormItem>
                </Col>
              } else if (item.type === 'select') {
                return <Col span={8} key={index} >
                  <FormItem label={item.name} {...formItemLayout}>
                    {getFieldDecorator(item.key, {
                    })(
                      <Select>
                        {item.options.map((ele: any, i: string) => (
                          <Option value={ele.value} key={i}>{ele.label}</Option>
                        ))}
                      </Select>
                    )}
                  </FormItem>
                </Col>
              } else if (item.type === 'datePicker') {
                return <Col span={8} key={index} >
                  <FormItem label={item.name} {...formItemLayout}>
                    {getFieldDecorator(item.key, {
                    })(
                      <DatePicker
                        className={classnames('search-datePicker')}
                        placeholder={`请选择${item.placeholder}`}
                        locale={locale}
                      />
                    )}
                  </FormItem>
              </Col>
              }
            })
          }
        </Row>
      </Form>

    )
  }
}

export default Form.create()(HeaderSearch);
